<template>
	<view>
		<!-- 轮播图 -->
		<swiper style="height: 200px;" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
			indicator-color="#fff" indicator-active-color="#ff6700">
			<swiper-item v-for="(item, index) in lunboMovie" :key="index">
				<view class="swiper-item">
					<image style="width: 100%;" :src="item.url" mode="widthFix"></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 商品分类列表 -->
		<view class="movie-list">
			<view class="title">热映电影</view>
			<view class="movie-card" v-for="(item, index) in localMovieData" :key="index" @click="goToDetail(item)">
				<view class="movie-content">
					<view class="movie-poster">
						<image :src="item.img" mode="aspectFill"></image>
					</view>
					<view class="text-info">
						<view class="name">片名：{{ item.nm }}</view>
						<view class="cat">类别：{{ item.cat }}</view>
						<view class="dir">导演：{{ item.dir }}</view>
						<view class="msg">{{ item.videoName }}</view>
						<view class="act">演员：{{ item.desc }}</view>
						<view class="showtime">上映时间：{{ item.pubDesc }}</view>
						<view class="info2">
							<view class="sc">评分：{{ item.sc }}</view>
							<view class="wish">{{ item.wish }}人想看</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		CONFIG
	} from '../../utils/config';
	import {
		data
	} from '../../utils/data';

	let lunboMovie = ref([]);
	const localMovieData = ref(data);

	onLoad(() => {
		getLunbo();
	});

	async function getLunbo() {
		let res = await uni.$get(CONFIG.leancloud_url + "/1.1/classes/movielunbo");
		lunboMovie.value = res.results;
	}

	function goToDetail(item) {
		uni.navigateTo({
			url: `/pages/movieDetails/movieDetails?movie=${encodeURIComponent(JSON.stringify(item))}`
		});
	}
</script>

<style scoped>
	/* 样式与您之前提供的相同 */
</style>



<style scoped>
	.movie-list {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20px;
		padding: 20px;
		background-color: #f5f5f5;
	}

	.title {
		font-size: 28px;
		font-weight: bold;
		color: #333;
		text-align: center;
		margin-bottom: 30px;
	}

	.movie-card {
		background-color: #ffffff;
		border: 1px solid #e0e0e0;
		border-radius: 10px;
		padding: 15px;
		width: 100%;
		margin-bottom: 20px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		transition: transform 0.2s ease-in-out;
		display: flex;
		/* 使用flex布局 */
		align-items: flex-start;
		/* 垂直对齐顶部 */
	}

	.movie-content {
		display: flex;
		align-items: flex-start;
		/* 垂直对齐顶部 */
	}

	.movie-poster {
		width: 150px;
		/* 固定宽度 */
		height: 220px;
		/* 固定高度 */
		overflow: hidden;
		border-top-left-radius: 10px;
		border-bottom-left-radius: 10px;
	}

	.movie-poster image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* 保持宽高比 */
	}

	.text-info {
		padding-left: 20px;
		/* 与图片保持间隔 */
		color: #666;
	}

	.name {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 5px;
	}

	.cat,
	.dir,
	.msg,
	.act,
	.showtime,
	.sc,
	.wish {
		font-size: 14px;
		margin-bottom: 5px;
	}

	.wish {
		color: #ff6700;
	}
</style>